<template>
  <div class="amap-page-container">
    <el-amap
      ref="map"
      class="amap-demo"
      :center="center"
      :zoom="zoom"
      :map-style="defaultMap"
      view-mode="3D"
      @init="init"
      @mousewheel="changeZoom"
    >
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="showLayer"></el-amap-layer-satellite>

      <!-- 缩放工具 -->
      <el-amap-control-tool-bar
        :visible="true"
        :position="{
          top: '0.8vh',
          left: '0.5vw',
          opacity: '0.8',
        }"
        @show="showControl"
      ></el-amap-control-tool-bar>

      <!-- 地图类型 -->
      <div class="map-type">
        <div
          class="list"
          @mouseleave="onMouseLeaveCurrentMapType()"
          @mouseenter="onMouseEnterCurrentMapType()"
          v-if="isShowCurrentMapType"
        >
          <div class="light">
            <img
              class="map-type-img"
              :src="mapTypeList[mapType - 1].selectedUrl"
            />
          </div>
        </div>
        <div
          class="select"
          v-if="!isShowCurrentMapType"
          @mouseleave="onMouseLeaveCurrentMapType()"
        >
          <div
            class="light"
            style="flex: 1"
            v-for="item in mapTypeList"
            :key="item.id"
            @click="clickMapType(item)"
          >
            <el-tooltip
              effect="dark"
              :content="item.title"
              placement="top-start"
            >
              <img
                class="map-type-img"
                :src="mapType == item.id ? item.selectedUrl : item.url"
                :style="{
                  border: mapType == item.id ? '2px solid #3dbb99' : 'none',
                  'border-radius': mapType == item.id ? '2px' : '0px',
                }"
              />
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- 右下角 -->
      <div class="right-bottom-box">
        <div class="div-box" @click="openStatusBox">
          <img
            class="box-img"
            :src="require(`../../assets/index-map/传感器.png`)"
          />
          <span class="box-text">传感器</span>
        </div>
        <div v-show="showStatusBox" style="position: absolute; top: -90px">
          <div
            class="div-box border-bottom"
            @click="abnormal"
            :style="{
              background: yichang ? 'rgba(0, 140, 255, 0.7)' : '#fff',
            }"
          >
            <img
              class="box-img"
              :src="require(`../../assets/index-map/异常.png`)"
            />
            <span class="box-text">异常</span>
          </div>
          <div
            class="div-box border-bottom"
            @click="fire"
            :style="{
              background: huojing ? 'rgba(0, 140, 255, 0.7)' : '#fff',
            }"
          >
            <img
              class="box-img"
              :src="require(`../../assets/index-map/报警.png`)"
            />
            <span class="box-text">报警</span>
          </div>
        </div>

        <div
          class="div-box"
          @click="allDevice"
          style="margin-left: 10px"
          :style="{
            background: quanbu ? 'rgba(0, 140, 255, 0.7)' : '#fff',
          }"
        >
          <img
            class="box-img"
            :src="require(`../../assets/index-map/全部.png`)"
          />
          <span class="box-text">全部</span>
        </div>
        <div
          class="div-box2 border-left"
          @click="wenGan"
          :style="{
            background: wengan ? 'rgba(0, 140, 255, 0.7)' : '#fff',
          }"
        >
          <img
            class="box-img"
            :src="require(`../../assets/index-map/温度传感器.png`)"
          />
          <span class="box-text">温度传感器</span>
        </div>
        <div
          class="div-box2 border-left"
          @click="yanWu"
          :style="{
            background: yanwu ? 'rgba(0, 140, 255, 0.7)' : '#fff',
          }"
        >
          <img
            class="box-img"
            :src="require(`../../assets/index-map/烟雾传感器.png`)"
          />
          <span class="box-text">烟雾传感器</span>
        </div>
        <div
          class="div-box2 border-left"
          @click="shouBao"
          :style="{
            background: shoubao ? 'rgba(0, 140, 255, 0.7)' : '#fff',
          }"
        >
          <img
            class="box-img"
            :src="require(`../../assets/index-map/手动报警.png`)"
          />
          <span class="box-text">手动报警</span>
        </div>
      </div>

      <!-- 点标记 -->
      <!-- <el-amap-marker
        v-for="(item, index) in marker"
        :key="index"
        :position="item.position"
        :visible="selectAlert"
        @init="initMarker"
        @click="clickMarker"
        :content="setIcon(item.status)"
      >
      </el-amap-marker> -->
      <el-amap-marker
        v-for="(item, index) in marker"
        :key="index"
        :position="item.position"
        :icon="item.icon"
        :visible="selectAlert"
        @init="initMarker"
        @click="clickMarker($event, item)"
        :title="item.title"
      >
      </el-amap-marker>

      <!-- 聚合点 -->
      <el-amap-marker-cluster
        :points="points"
        @click="clickCluster"
        :maxZoom="20"
        id="cluster"
        :renderMarker="onRenderMarker"
      >
      </el-amap-marker-cluster>

      <!-- 设备列表弹窗 -->
      <el-amap-info-window
        :visible="infoWindow && !isCluster"
        :position="infoWinPosition"
        :offset="[15, 0]"
        :autoMove="true"
        :closeWhenClickMap="true"
        :showShadow="true"
      >
        <div>
          <div style="padding: 10px 3px">
            <span>
              <span v-if="huojing"> 报警 </span>
              <span v-if="yichang"> 异常 </span>
            </span>
            <span style="color: #ff2406">
              {{ selectedAlertList.length }}个
            </span>
          </div>

          <div class="info-window">
            <div
              :class="[
                'info-item',
                deviceSource == data.deviceSource ? 'background' : '',
              ]"
              v-for="(data, index) in selectedAlertList"
              :key="index"
              @click="openDetail(data)"
            >
              <img
                :src="getDeviceDetailImg(data.deviceTypeName)"
                alt=""
                style="width: 16px; height: 16px"
              />
              <span class="info-item-label">
                {{ data.deviceName }}
              </span>
            </div>
          </div>
        </div>
      </el-amap-info-window>

      <el-amap-info-window
        :visible="infoWindow && isCluster"
        :position="infoWinPosition"
        :offset="[0, -30]"
        :autoMove="true"
        :closeWhenClickMap="true"
        :showShadow="true"
      >
        <div>
          <div style="padding: 10px 3px">
            <span>
              <span v-if="quanbu"> 全部设备 </span>
              <span v-if="wengan"> 温度传感器 </span>
              <span v-if="yanwu"> 烟雾传感器 </span>
              <span v-if="shoubao"> 手动报警 </span>
            </span>
            <span style="color: #ff2406"> {{ deviceList.length }}个 </span>
          </div>

          <div class="info-window">
            <div
              :class="[
                'info-item',
                deviceSource == data.deviceSource ? 'background' : '',
              ]"
              v-for="(data, index) in deviceList"
              :key="index"
              @click="openDetail(data)"
            >
              <img
                :src="getDeviceDetailImg(data.deviceTypeName)"
                alt=""
                style="width: 16px; height: 16px"
              />
              <span class="info-item-label">
                {{ data.deviceName }}
              </span>
            </div>
          </div>
        </div>
      </el-amap-info-window>
      <!-- <el-amap-info-window
        :visible.sync="infoWindow"
        :position="infoWinPosition"
        :offset="[230, 20]"
        :autoMove="true"
        :closeWhenClickMap="true"
        :isCustom="true"
      >
        <div v-if="isCluster" class="info-window">
          <div class="info-window-title" style="color: #5d5d5d">
            传感器{{ deviceNum }}个
          </div>
          <div class="info-window-list-container">
            <el-row
              class="info-window-list"
              v-for="(item, index) in deviceList"
              :key="index"
              @click.native="openDetail(item)"
              ><a
                style="color: #409eff"
                :class="[
                  'info-window-list-icon',
                  item.deviceTypeName == '温感'
                    ? 'el-icon-cpu'
                    : item.deviceTypeName == '烟感'
                    ? 'el-icon-smoking'
                    : item.deviceTypeName == '手报'
                    ? 'el-icon-heavy-rain'
                    : '',
                ]"
              ></a
              >{{ item.deviceName }}</el-row
            >
          </div>
        </div>
        <div
          v-else
          class="info-window"
          style="
            background-image: linear-gradient(270deg, #f35a58 0%, #f37958 100%);
          "
        >
          <div class="info-window-list-container">
            <el-row
              class="info-window-list"
              v-for="(item, index) in alertList"
              :key="index"
              @click.native="openAlertDetail(item)"
              ><a
                style="color: #409eff"
                :class="[
                  'info-window-list-icon',
                  item.deviceTypeName == '温感'
                    ? 'el-icon-cpu'
                    : item.deviceTypeName == '烟感'
                    ? 'el-icon-smoking'
                    : item.deviceTypeName == '手报'
                    ? 'el-icon-heavy-rain'
                    : '',
                ]"
              ></a
              >{{ item.deviceName }}</el-row
            >
          </div>
        </div>
      </el-amap-info-window> -->

      <!-- 预警统计 -->
      <warn-count :warnCount="warnCount"></warn-count>
      <!-- 设备详情 -->
      <div class="device-detail-box" v-if="detailWindow">
        <i class="el-icon-error close-icon" @click="closeDetail"></i>
        <div class="device-detail-header">
          <span
            v-if="getDeviceDetailImgBool(detailList.deviceTypeName)"
            style="color: white; margin: 0 5px 0 8px"
          >
            <i
              class="iconfont icon-yangan"
              v-if="detailList.deviceTypeName == '烟感'"
            ></i>
            <i
              class="iconfont icon-wengan"
              v-if="detailList.deviceTypeName == '温感'"
            ></i>
            <i
              class="iconfont icon-tianranqi"
              v-if="detailList.deviceTypeName == '天然气'"
            ></i>
            <i
              class="iconfont icon-shoudongbaojingqi1"
              v-if="detailList.deviceTypeName == '手报'"
            ></i>

            <i
              class="iconfont icon-shuijin"
              v-if="detailList.deviceTypeName == '水浸报警'"
            ></i>
            <i
              class="iconfont icon-hongwaitanceqi"
              v-if="detailList.deviceTypeName == '红外探测'"
            ></i>
            <i
              class="iconfont icon-shengguangbaojingqi-"
              v-if="detailList.deviceTypeName == '声光报警'"
            ></i>
          </span>
          <span v-else style="color: white; margin: 0 5px 0 8px">
            <i class="iconfont icon-qitashebei-1"></i>
          </span>

          <!-- <a
            :class="[
              'detail-card-title-icon',
              detailList.deviceTypeName == '温感'
                ? 'el-icon-cpu'
                : detailList.deviceTypeName == '烟感'
                ? 'el-icon-smoking'
                : detailList.deviceTypeName == '手报'
                ? 'el-icon-heavy-rain'
                : '',
            ]"
          ></a> -->
          <span class="detail-card-title-text">{{ detailTitle }}</span>
        </div>
        <div class="device-detail-content">
          <el-tabs :stretch="true" v-model="activeName">
            <el-tab-pane label="关联摄像机" name="first">
              <div style="height: 320px; padding-bottom: 10px">
                <iframe
                  :src="detailList.streamUrl"
                  height="100%"
                  width="100%"
                  allowfullscreen
                  allow="autoplay; fullscreen; microphone;"
                ></iframe>
              </div>
            </el-tab-pane>
            <el-tab-pane label="预警事件" name="second">
              <div
                class="early-warning-event"
                :style="{
                  'max-height': earlyWarningEventHight,
                  'min-height': '100px',
                }"
              >
                <div
                  class="event"
                  v-for="(item, index) in detailList.equipmentCollectAlertList"
                  :key="index"
                  :style="{
                    background: index % 2 == 0 ? '#fdfcfc' : '#eae7e7',
                  }"
                >
                  <div class="event-item">
                    <span class="info-item-label">报警地点</span>
                    <span class="info-item-value">
                      {{ item.deviceAddress }}
                    </span>
                  </div>
                  <div class="event-item">
                    <span class="info-item-label">报警原因</span>
                    <span class="info-item-value">
                      {{ item.alarmCause }}
                    </span>
                  </div>
                  <div class="event-item">
                    <span class="info-item-label">报警时间</span>
                    <span class="info-item-value">
                      {{ item.alertTimeStr }}
                    </span>
                  </div>
                </div>
                <div
                  v-if="
                    detailList.equipmentCollectAlertList &&
                    detailList.equipmentCollectAlertList.length == 0
                  "
                >
                  <el-empty description="暂无数据" :image-size="50"></el-empty>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="基本信息" name="third">
              <div class="info">
                <div class="info-item">
                  <span class="info-item-label">设备类型</span>
                  <span class="info-item-value">
                    {{ detailList.deviceTypeName }}
                  </span>
                </div>
                <div class="info-item">
                  <span class="info-item-label">设备编码</span>
                  <span class="info-item-value">
                    {{ detailList.deviceSource }}
                  </span>
                </div>
                <div class="info-item">
                  <span class="info-item-label">设备名称</span>
                  <span class="info-item-value">
                    {{ detailList.deviceName }}
                  </span>
                </div>
                <div class="info-item">
                  <span class="info-item-label">厂家</span>
                  <span class="info-item-value">
                    {{ detailList.manufactor }}
                  </span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-amap>
  </div>
</template>

<script>
import mapApi from '@/api/gaode-map'
import WarnCount from './component/WarnCount.vue'
import deviceManageApi from '@/api/device-manage'

export default {
  components: { WarnCount },
  data() {
    return {
      map: null, //初始化地图
      // center: [108.27947273101331, 22.85713439190149],
      center: [108.279271, 22.859703],
      zoom: 18,
      markers: null,

      defaultMap: 'amap://styles/dark',
      showLayer: false,
      mapType: 3, // 默认卫星地图
      mapTypeList: [
        {
          url: require('@/assets/index-map/standard.png'),
          selectedUrl: require('@/assets/index-map/standard_selected.png'),
          title: '标准',
          id: 1,
          isDisplay: false,
        },
        {
          url: require('@/assets/index-map/real_scene.png'),
          selectedUrl: require('@/assets/index-map/real_scene_selected.png'),
          title: '实景',
          id: 2,
          isDisplay: true,
        },
        {
          url: require('@/assets/index-map/phantom_black.png'),
          selectedUrl: require('@/assets/index-map/phantom_black_selected.png'),
          title: '幻影黑',
          id: 3,
          isDisplay: false,
        },
      ],
      isShowCurrentMapType: true,
      earlyWarningEventHight: 0,

      warnCount: {}, //预警统计

      detailWindow: false, //详情窗体
      deviceSource: '', //设备编码
      detailTitle: '',
      detailList: [], //设备详情列表
      activeName: 'second',

      showStatusBox: false, //显示设备状态窗口
      huojing: false,
      yichang: false,
      quanbu: true,
      wengan: false,
      yanwu: false,
      shoubao: false,

      deviceStatus: '', //设备告警状态入参 1-异常 2-报警
      deviceType: '', //设备类型

      infoWindow: false, //聚点信息窗体
      infoWinPosition: [108.27947273101331, 22.85713439190149], //信息窗体位置
      isCluster: true, //信息窗体类型
      deviceNum: null, //传感器数量
      deviceList: [], //设备列表

      alertList: [], //告警列表
      coordinatesData: [], //聚合点数据
      points: [], //聚合点坐标
      marker: [], //点标注坐标
      selectAlert: false, //选择设备告警状态

      guid: [], //获取所有设备guid
      guidArr: [], //网格id去重

      timer: null, //定时器
      selectedAlertList: [],

      deviceDictionaries: [],
      deviceDetailImg: [
        {
          烟感: 'smoke_sensation',
        },
        {
          温感: 'temperature_sensation',
        },
        {
          天然气: 'natural_gas',
        },
        {
          手报: 'hand_newspaper',
        },
        {
          水浸报警: 'flooding_alarm',
        },
        {
          红外探测: 'infrared_acquisition',
        },
        {
          声光报警: 'audible_visual_alarm',
        },
      ],
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getCoordinatesAndWarn()
    }, 1 * 60 * 1000)
  },
  created() {
    this.earlyWarningEventHight = this.getHeightAndWidth()
    this.getDictValueAttr() // 设备类型
    this.getCoordinatesAndWarn()
  },
  methods: {
    getHeightAndWidth() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      console.log('clientHeight=', clientHeight - 450)
      return clientHeight - 450 + 'px'
    },
    // 设备类型
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue
      })
    },

    // 获取设备坐标，预警统计
    async getCoordinatesAndWarn() {
      // 重置数组
      this.points = []
      this.guidArr = []
      this.guid = []
      this.marker = []

      await mapApi
        .gridCoordinate({
          zoom: this.zoom,
          deviceType: this.deviceType,
          deviceStatus: this.deviceStatus,
        })
        .then((res) => {
          if (res.status === 200) {
            this.coordinatesData = res.data.data.list
            this.alertList = res.data.data.alertList
            this.warnCount = res.data.data.count[0]
          }
        })

      // console.log(this.alertList, '告警列表')

      // 获取聚合点坐标
      this.coordinatesData.forEach((e) => {
        let trans = this.lnglat_cal(e.data.longitude, e.data.latitude) // 转换坐标(百度-->高德)
        e.data.longitude = trans.lng
        e.data.latitude = trans.lat

        this.points.push({ lnglat: [trans.lng, trans.lat] })
      })

      if (this.huojing || this.yichang) {
        this.alertList.forEach((ele) => {
          this.deviceDictionaries.forEach((ele1, i1) => {
            if (Number(ele.deviceType) === ele1.dictValue) {
              ele.deviceTypeName = ele1.dictText
            }
          })

          let trans = this.lnglat_cal(ele.longitude, ele.latitude)
          ele.longitude = trans.lng
          ele.latitude = trans.lat
        })
        const list = []
        this.alertList.forEach((ele) => {
          if (
            !list.find(
              (item) => item.lng == ele.longitude && item.lat == ele.latitude
            )
          ) {
            list.push({
              deviceStatus: this.deviceStatus,
              lng: ele.longitude,
              lat: ele.latitude,
              data: [],
            })
          }
        })

        list.forEach((ele) => {
          this.alertList.forEach((item) => {
            if (ele.lng == item.longitude && ele.lat == item.latitude) {
              ele.data.push(item)
            }
          })
        })
        //  console.log('list=', list)

        list.forEach((ele) => {
          this.marker.push({
            icon:
              ele.deviceStatus == '1'
                ? require(`../../assets/index-map/异常.png`)
                : require(`../../assets/index-map/报警.png`),
            position: [ele.lng, ele.lat],
            deviceStatus: ele.deviceStatus,
            lng: ele.lng,
            lat: ele.lat,
            data: ele.data,
            title:
              ele.deviceStatus == '1'
                ? '异常' + ele.data.length + '个'
                : '报警' + ele.data.length + '个',
          })
        })
        console.log('marker=', this.marker)
      }

      // 获取告警设备坐标
      // this.alertList.forEach((e) => {
      //   let trans = this.lnglat_cal(e.longitude, e.latitude) // 转换坐标(百度-->高德)
      //   console.log('trans=', trans)
      //   this.marker.push({
      //     position: [trans.lng, trans.lat],
      //     guid: e.gridMount,
      //     status: e.deviceStatus,
      //   })
      //   // e.longitude = trans.lng
      //   // e.latitude = trans.lat
      // })
      // console.log('this.marker=', this.marker)
    },
    // 获取设备列表
    async getGridCoordinateDetail() {
      this.deviceList = []
      this.selectedAlertList = []
      await mapApi
        .gridCoordinateDetail({
          guids: this.guidArr,
          deviceType: this.deviceType,
        })
        .then((res) => {
          if (res.status == 200) {
            this.deviceList = res.data.data
            this.selectedAlertList = res.data.data
          }
        })
    },
    // 获取设备详情
    async getEquipmentMapDetail() {
      await mapApi
        .equipmentMapDetail({
          deviceSource: this.deviceSource,
        })
        .then((res) => {
          if (res.status == 200) {
            this.detailList = res.data.data[0]
          }
        })
    },
    // 经纬度换算：百度-->高德
    lnglat_cal(lng, lat) {
      let x = lng - 0.0065,
        y = lat - 0.006,
        x_pi = (3.14159265358979324 * 3000.0) / 180.0

      let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
      let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
      let tempLon = z * Math.cos(theta)
      let tempLat = z * Math.sin(theta)
      return { lng: tempLon, lat: tempLat }
    },

    // 初始化地图
    init(map) {
      map.setZooms([2, 19])
      this.map = map

      // this.styles = [
      //   {
      //     url: require(`../../assets/index-map/报警.png`),
      //     size: new AMap.Size(32, 32),
      //   },
      // ]
    },
    // 监听地图层级变化
    changeZoom(zoom) {
      let temp = this.map.getZoom()
      if (temp < 19) {
        this.infoWindow = false
      }
    },
    // 比例尺
    showControl() {},
    onMouseEnterCurrentMapType() {
      this.isShowCurrentMapType = false
    },
    onMouseLeaveCurrentMapType() {
      this.isShowCurrentMapType = true
    },
    // 地图类型切换
    clickMapType(item) {
      this.mapType = item.id
      // this.showLayer = false
      switch (item.id) {
        case 1:
          this.showLayer = false
          this.defaultMap = 'amap://styles/normal'
          break
        case 2:
          this.defaultMap = 'amap://styles/dark'
          this.showLayer = true
          break
        case 3:
          this.showLayer = false
          this.defaultMap = 'amap://styles/dark'
          break
      }
      this.isShowCurrentMapType = true
    },

    // 初始化点标记
    initMarker(marker) {},
    // 点击点标记打开信息窗体
    clickMarker(MapsEvent, marker) {
      // console.log('MapsEvent=', MapsEvent)
      // console.log('marker=', marker)

      this.isCluster = false
      this.deviceSource = ''
      this.selectedAlertList = []

      this.infoWinPosition = [
        MapsEvent.target._position[0],
        MapsEvent.target._position[1],
      ]
      this.selectedAlertList = marker.data
      this.infoWindow = true

      // this.guid = []
      // console.log(MapsEvent)
      // this.infoWinPosition = [MapsEvent.target._position[0], MapsEvent.target._position[1]]
      // this.alertList.forEach(e => {
      //   if (e.longitude == MapsEvent.target._position[0] && e.latitude == MapsEvent.target._position[1]) {
      //     this.guid.push(e.gridMount)
      //   }
      // })
      // // guid去重
      // this.guidArr = [...new Set(this.guid)] // 好方法

      // // 视觉跟踪
      // this.map.setCenter([MapsEvent.target._position[0], MapsEvent.target._position[1]])
      // if (this.map.getZoom() != 17) {
      //   this.map.setZoom(17)
      // } else {
      //   this.infoWindow = true
      // }

      // this.isCluster = false
      // this.getGridCoordinateDetail()
    },
    // 标记样式
    setIcon(value) {
      const content = `<img src="https://iphoto.macsc.com/icon/icon/256/20200601/79633/3283133.png" style="display:flex;width:2vw"/>`
      return content
      // if (value == '2') {
      //   const content = `<svg t="1650444305892" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2622" width="50" height="50"><path d="M490.2 445.2c0-18 12.6-32.9 28-32.9 15.5 0 28 13.1 28 31.1l0 178.8c0 18-12.6 30.2-28 30.2-15.5 0-28-12-28-29.9L490.2 445.2zM518.7 747.4c-17.1 0-30.9-14.1-30.9-31.6 0-17.4 13.8-31.6 30.9-31.6 17.1 0 30.9 14.1 30.9 31.6C549.6 733.3 535.8 747.4 518.7 747.4L518.7 747.4z" p-id="2623" fill="#d81e06" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M568.832 196.608c20.992 35.328 333.312 560.64 349.184 587.776 14.336 24.064 14.336 47.104 6.656 61.952-8.704 16.384-29.696 21.504-52.736 21.504-18.944 0-678.912 0-709.632 0-28.16 0-49.152-7.68-55.296-19.968-7.68-16.384-6.144-37.888 11.264-67.072C137.216 749.056 447.488 216.064 457.728 199.68c15.36-26.112 37.376-43.52 57.856-43.52C536.064 156.16 556.544 176.64 568.832 196.608zM502.272 252.416c-11.776 19.968-302.08 513.024-316.928 537.088-6.656 11.264-8.192 17.92 6.656 17.92 44.544 0 602.624 0 645.632 0 14.336 0 15.872-8.192 9.728-18.432-25.088-41.472-308.736-518.144-321.024-537.6C514.56 231.936 514.048 232.448 502.272 252.416z" p-id="2624" fill="#d81e06"></path></svg>`
      //   return content
      // }
      // if (value == '1') {
      //   const content = `<img src="https://iphoto.macsc.com/icon/icon/256/20200601/79633/3283133.png" style="display:flex;width:2vw"/>`
      //   return content
      // }
    },

    // 点击聚合点打开信息窗体
    clickCluster(lnglat) {
      this.isCluster = true
      this.deviceSource = ''
      this.deviceNum = lnglat.clusterData.length //传感器个数

      this.infoWinPosition = [lnglat['lnglat']['lng'], lnglat['lnglat']['lat']]

      // 根据网格经纬度获取guid，并获取设备列表
      this.guid = []
      this.coordinatesData.forEach((e) => {
        if (
          e.data.longitude.toFixed(6) == this.infoWinPosition[0] &&
          e.data.latitude.toFixed(6) == this.infoWinPosition[1]
        ) {
          this.guid.push(e.data.guid)
        }
      })
      // guid去重
      this.guidArr = [...new Set(this.guid)] // 好方法
      console.log('this.guidArr=', this.guidArr)
      // 视觉跟踪
      this.map.setCenter([lnglat['lnglat']['lng'], lnglat['lnglat']['lat']])
      if (this.map.getZoom() != 17) {
        this.map.setZoom(17)
      } else {
        this.infoWindow = !this.infoWindow
      }
      this.getGridCoordinateDetail()
    },
    onRenderMarker(context) {
      const src = require(`../../assets/index-map/信号点.png`)
      const content = `<img src="${src}" style="width:35px;height:35px;" />`
      // var offset = new AMap.Pixel(-9, -9);
      context.marker.setContent(content)
      // context.marker.setOffset(offset)
    },

    //右下角传感器图标点击
    openStatusBox() {
      this.showStatusBox = !this.showStatusBox
    },
    // 点击异常图标
    abnormal() {
      this.infoWindow = false
      this.deviceStatus = '1'
      this.deviceType = ''
      this.huojing = false
      this.yichang = true
      this.quanbu = true
      this.wengan = false
      this.yanwu = false
      this.shoubao = false
      this.selectAlert = true
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      if (this.alertList.length > 0) {
        this.map.setCenter([
          this.alertList[0].longitude,
          this.alertList[0].latitude,
        ])
      }
      this.map.setZoom(17)
    },
    // 点击报警图标
    fire() {
      this.infoWindow = false
      this.deviceStatus = '2'
      this.deviceType = ''
      this.huojing = true
      this.yichang = false
      this.quanbu = true
      this.wengan = false
      this.yanwu = false
      this.shoubao = false
      this.selectAlert = true
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      if (this.alertList.length > 0) {
        this.map.setCenter([
          this.alertList[0].longitude,
          this.alertList[0].latitude,
        ])
      }
      this.map.setZoom(17)
    },

    //点击全部图标
    allDevice() {
      this.infoWindow = false
      this.deviceStatus = ''
      this.deviceType = ''
      this.huojing = false
      this.yichang = false
      this.quanbu = true
      this.wengan = false
      this.yanwu = false
      this.shoubao = false
      this.selectAlert = false
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      this.map.setCenter([108.27947273101331, 22.85713439190149])
      this.map.setZoom(15)
    },
    //点击温度传感器图标
    wenGan() {
      this.infoWindow = false
      this.deviceStatus = ''
      this.deviceType = '1'
      this.huojing = false
      this.yichang = false
      this.quanbu = false
      this.wengan = true
      this.yanwu = false
      this.shoubao = false
      this.selectAlert = false
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      if (this.coordinatesData.length > 0) {
        this.map.setCenter([
          this.coordinatesData[0].data.longitude,
          this.coordinatesData[0].data.latitude,
        ])
      }
      this.map.setZoom(15)
    },
    //点击烟雾传感器图标
    yanWu() {
      this.infoWindow = false
      this.deviceStatus = ''
      this.deviceType = '2'
      this.huojing = false
      this.yichang = false
      this.quanbu = false
      this.wengan = false
      this.yanwu = true
      this.shoubao = false
      this.selectAlert = false
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      if (this.coordinatesData.length > 0) {
        this.map.setCenter([
          this.coordinatesData[0].data.longitude,
          this.coordinatesData[0].data.latitude,
        ])
      }
      this.map.setZoom(15)
    },
    //点击手动报警图标
    shouBao() {
      this.infoWindow = false
      this.deviceStatus = ''
      this.deviceType = '3'
      this.huojing = false
      this.yichang = false
      this.quanbu = false
      this.wengan = false
      this.yanwu = false
      this.shoubao = true
      this.selectAlert = false
      this.detailWindow = false

      this.getCoordinatesAndWarn()

      // 视觉跟踪
      if (this.coordinatesData.length > 0) {
        this.map.setCenter([
          this.coordinatesData[0].data.longitude,
          this.coordinatesData[0].data.latitude,
        ])
      }
      this.map.setZoom(15)
    },

    // 打开设备详情
    openDetail(item) {
      // //console.log(item);
      this.deviceSource = item.deviceSource
      this.detailTitle = item.deviceName
      this.detailWindow = true
      this.getEquipmentMapDetail()
    },
    // 打开告警设备详情
    openAlertDetail(item) {
      this.deviceSource = item.deviceSource
      this.detailTitle = item.deviceName
      this.detailWindow = true
      this.getEquipmentMapDetail()
    },
    // 关闭详情窗口
    closeDetail() {
      console.log('closeDetail')
      this.detailWindow = false
    },

    getImgSrc(imgName) {
      return require(`@/assets/home/${imgName}`)
    },
    getDeviceDetailImg(imgName) {
      let imgUrl = this.getImgSrc('other_device.png')
      this.deviceDetailImg.forEach((ele) => {
        for (const key in ele) {
          if (key == imgName) {
            imgUrl = this.getImgSrc(ele[imgName] + '.png')
          }
        }
      })
      return imgUrl
    },
    getDeviceDetailImgBool(imgName) {
      let bool = false
      this.deviceDetailImg.forEach((ele) => {
        for (const key in ele) {
          if (key == imgName) {
            bool = true
          }
        }
      })
      return bool
    },
  },
}
</script>

<style lang="scss" scoped>
@import './style/gaode-map.scss';
</style>
